<template>
  <div class="simi_wrap">
    <div class="simiArtist_list">
      <div class="list_title">相似歌手</div>
      <ul>
        <li v-for="simiArtist in simiArtistInfo" :key="simiArtist.id">
          <router-link
            :to="{
              name: 'SingerDetail',
              query: {
                id: simiArtist.id,
              },
            }"
          >
            <img
              :src="`${simiArtist.picUrl}?param=50y50`"
              :alt="`${simiArtist.name}`"
              :title="`${simiArtist.name}`"
            />
          </router-link>
          <router-link
            :to="{
              name: 'SingerDetail',
              query: {
                id: simiArtist.id,
              },
            }"
          >
            <p class="simiArtist_name" :title="`${simiArtist.name}`">
              {{ `${simiArtist.name}` }}
            </p>
          </router-link>
        </li>
      </ul>
      <div class="list_title">网易云音乐端下载</div>
      <ul>
        <li>
          <img src="https://itunes.apple.com/cn/app/id590338362" alt="" />
        </li>
        <li>
          <img src="https://music.163.com/api/pc/download/latest" alt="" />
        </li>
        <li>
          <img
            src="https://music.163.com/api/android/download/latest2"
            alt=""
          />
        </li>
      </ul>
      <p>同步歌单,随时畅听320k好音乐</p>
      <div class="list_title">用户wiki</div>
      <ul>
        <li class="userTodo">
          <SvgIcon class="iconfont" icon="icon-daohang-shoukuanxinxi"></SvgIcon>
          <span>补充或修改艺人资料</span>
        </li>
        <li class="userTodo">
          <SvgIcon class="iconfont" icon="icon-daohang-shoukuanxinxi"></SvgIcon>
          <span>用户wiki任务中心</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'SimiArtist',
}
</script>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { reqSimiArtist } from '@/api/singerDetail'
import type { SimiArtistList } from '@/api/modules/singerDetailModel'

const prop = defineProps(['simiArtistInfo'])
const route = useRoute()
</script>

<style lang="less" scoped>
.simi_wrap {
  width: 270px;
  padding: 20px 40px 40px 30px;
  .simiArtist_list {
    .list_title {
      height: 16px;
      color: #333;
      font-size: 12px;
      line-height: 5px;
      border-bottom: 1px solid #ccc;
    }
    ul {
      width: 225px;
      display: flex;
      justify-content: left;
      align-items: center;
      flex-wrap: wrap;
      margin: 20px 0;
      li {
        width: 75px;
        height: 92px;
        img {
          width: 50px;
          height: 50px;
          &:hover {
            cursor: pointer;
          }
        }
        p {
          width: 50px;
          height: 16px;
          margin-top: 5px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &:hover {
            cursor: pointer;
            text-decoration: underline;
          }
        }
      }
      .userTodo {
        width: 200px;
        height: 14px;
        color: #333;
        font-size: 12px;
        margin: 5px 0;
      }
    }
    p {
      height: 16px;
      color: #999;
      font-size: 12px;
      margin-bottom: 20px;
    }
  }
}
</style>
